<template>
  <div class="community">
    <div float style="width: 70%; float: left;">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入少于300字的内容"
        v-model="content">
      </el-input>
      <el-button size="mini" type="success" :disabled="saveing" style="float: right; margin-right: 0px;margin-top: 10px; " @click="save()">发布话题</el-button>
      <el-card shadow="always" style="margin-top: 45px;">
        <el-table :data="contentList" style="width: 100%; margin-left: 10px; margin-right: 10px; margin-top: 10px;">
          <el-table-column prop="name" label="" width="100px;">
            <template slot-scope="scope">
              <div class="head_img" @click="communityInfo(scope.row.id)">
                <img :src="scope.row.avatar"></img>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="最新话题" width="">
            <template slot-scope="scope">
                <div @click="communityInfo(scope.row.id)">
                  <font size="1" color="#565656">{{!scope.row.account.indexOf('xs')?'学生-':'教师-'}}{{scope.row.name}} 发表于 {{scope.row.createTime}}</font><br />
                  <font size="3" color="#000000">{{scope.row.content}}</font><br />
                  <i class="el-icon-view"></i> {{scope.row.readCount}}
                  <i class="el-icon-message"></i> {{scope.row.evaluateCount}}
                  <i class="el-icon-star-on"></i> {{scope.row.likeCount}}
                </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-card>
    </div>
    <div float style="width: 30%; float: right;">
      <!-- <div class="head_img">
        <img style="float:right; 100px; height: 100px; margin-right: 30px;" :src="avatar"></img>
      </div> -->
      <el-card shadow="always" style="margin-top: 1px; margin-left: 10px; margin-bottom: 30px;">
        <p class="part-title" style="">本实验评价</p>
        <font size="6" color="darkorange" style="float: left;">{{ evaluate }}</font>
        <el-rate v-model="evaluate" @change="evaluateE" :disabled="evaluated" style="float: left; margin-left: 30px; margin-top: 10px;"></el-rate>
        <p style="margin-top: 50px;">{{ evaluateCount }}人评价</p>
      </el-card>
      <el-card shadow="always" style="margin-left: 10px; margin-top: 10px;">
        <el-table :data="experimentList" style="width: 80%; margin-left: 10%;">
          <el-table-column prop="experimentName" label="实验" width="">
            <template slot-scope="scope">
              <div @click="getCommunity(scope.row.id)">{{ scope.row.experimentName }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
    /* eslint-disable */
export default {
  data() {
    return {
      evaluated: false,
      evaluate: 0,
      evaluateCount: 0,
      saveing: false,
      experiment: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      content: '',
      experimentList: [],
      contentList: []
    }
  },
  created(){
    this.getExperimentList()
  },
  mounted() {
    this.getExperimentList()
  },
  activated() {
    this.getExperimentList()
  },
  computed: {
    id: {
      get () { return this.$store.state.user.id },
      set (val) { this.$store.commit('user/updateId', val) }
    },
    account: {
      get () { return this.$store.state.user.account },
      set (val) { this.$store.commit('user/updateAccount', val) }
    },
    avatar: {
      get () { return this.$store.state.user.avatar },
      set (val) { this.$store.commit('user/updateAvatar', val) }
    }
  },
  methods: {
    // 进入话题
    communityInfo(id){
      console.log('进入话题', id)
      this.$router.push({ name: 'community-info',
                              params: { parentId: id, exper: this.experiment }
                           })
    },
    getCommunity(id){
      console.log('查询实验的详情', id)
      this.experiment = id
      this.initPage()
      this.getContentByExper(id)
      this.getEvaluateResult()
    },
    getEvaluateResult(){
      this.$http({
        url: this.$http.adornUrl('/community/getEvalueate?experimentId=' + this.experiment),
        method: 'get'
      }).then(({data}) => {
        if (data.success) {
          this.evaluated = data.data.evaluate
          this.evaluateCount = data.data.evaluateCount
          this.evaluate = data.data.score
        } else {
          this.$message.error(data.message)
        }
      })
    },
    // 评价实验
    evaluateE(){
      this.$confirm('仅可以评价一次, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/community/evaluate'),
          method: 'post',
          data: this.$http.adornData({
            'experimentId': this.experiment,
            'score': this.evaluate
          })
        }).then(({data}) => {
          if (data.success) {
            this.$message.success('成功评价')
            this.getEvaluateResult()
          } else {
            this.$message.error(data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消评论'
        })
      })
    },
    // 得到实验列表
    getExperimentList() {
      this.$http({
        url: this.$http.adornUrl('/community/getHotExperiment'),
        method: 'post',
        data: this.$http.adornData({
          'pageNumber': this.pageIndex,
          'pageSize': this.pageSize
        })
      }).then(({data}) => {
        if (data.success) {
          this.experimentList = data.data
          this.experiment = data.data[0].id
          this.getEvaluateResult()
          console.log('当前实验为:', this.experimentList)
          this.getContentByExper(this.experiment)
        } else {
          this.$message.error(data.message)
        }
      })
    },
    save(){
      console.log('保存评论', this.content)
      if (this.content === undefined || this.content === null || this.content == ''){
        this.$message.info('请至少内容')
        return
      }
      this.saveing = true
      this.$http({
        url: this.$http.adornUrl('/community/save'),
        method: 'post',
        data: this.$http.adornData({
          'content': this.content,
          'experimentId': this.experiment,
          'parentId': 0
        })
      }).then(({data}) => {
        if (data.success) {
          this.$message.success("发表成功")
          this.getContentByExper(this.experiment)
        } else {
          this.$message.error(data.message)
        }
        this.saveing = false
      })
      this.content = ''
    },
    initPage(){
      this.pageIndex = 1
    },
    // 根据实验列表查询内容
    getContentByExper(exper){
      this.$http({
        url: this.$http.adornUrl('/community/page'),
        method: 'post',
        data: this.$http.adornData({
          'pageNumber': this.pageIndex,
          'pageSize': this.pageSize,
          'experimentId': this.experiment,
          'parentId': 0
        })
      }).then(({data}) => {
        if (data.success) {
          console.log('评论：', data)
          this.contentList = data.data.records
          this.totalPage = data.data.total
        } else {
          this.contentList = []
          this.totalPage = 0
          this.$message.error(data.message)
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getContentByExper(this.experiment)
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getContentByExper(this.experiment)
    }
  }
}
</script>

<style lang="scss" scoped>
  .community{
    .head_img{
      height: 90px;
    }
    .head_img img{
      width:90px;
      height:90px;
      border-radius:50px
    }
    .part-title {
        margin: 20px 0;
        color: #000;
        padding-left: 1em;
        font-size: 16px;
        position: relative;
        display: inline-block;
        width: 100%;
    }
    .part-title:before{
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 3px;
      height: 1em;
      background-color: #4976e8;
    }
  }
  .el-button--success {
      color: #fff;
      background-color: #273471 !important;
      border-color: #273471 !important;
  }
</style>
